"use client";

function Label() {
  return (
    <label
      htmlFor="my-drawer"
      className="btn btn-square btn-ghost drawer-button lg:hidden"
    >
      <svg
        data-src="https://unpkg.com/heroicons/20/solid/bars-3.svg"
        className="h-5 w-5"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        data-slot="icon"
        data-id="svg-loader_267"
      >
        <path
          fillRule="evenodd"
          d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z"
          clipRule="evenodd"
        ></path>
      </svg>
    </label>
  );
}

export default function Header() {
  return (
    <div className="flex items-center">
      <Label />

      <div className="grow"></div>
      <div className="flex items-center">
        <div>
          <input
            type="text"
            placeholder="Search"
            className="input input-sm rounded-full max-sm:w-24"
          />
        </div>
        <div className="dropdown dropdown-end z-10">
          <div tabIndex="0" className="btn btn-circle btn-ghost">
            <div className="indicator">
              <span className="badge indicator-item badge-error badge-xs"></span>
              <svg
                data-src="https://unpkg.com/heroicons/20/solid/bell.svg"
                className="h-5 w-5"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
                data-id="svg-loader_274"
              >
                <path
                  fillRule="evenodd"
                  d="M10 2a6 6 0 0 0-6 6c0 1.887-.454 3.665-1.257 5.234a.75.75 0 0 0 .515 1.076 32.91 32.91 0 0 0 3.256.508 3.5 3.5 0 0 0 6.972 0 32.903 32.903 0 0 0 3.256-.508.75.75 0 0 0 .515-1.076A11.448 11.448 0 0 1 16 8a6 6 0 0 0-6-6ZM8.05 14.943a33.54 33.54 0 0 0 3.9 0 2 2 0 0 1-3.9 0Z"
                  clipRule="evenodd"
                ></path>
              </svg>
            </div>
          </div>
          <ul
            tabIndex="0"
            className="menu dropdown-content rounded-box bg-base-100 mt-3 w-80 p-2 shadow-2xl"
          >
            <li>
              <a className="gap-4">
                <div className="avatar">
                  <div className="w-8 rounded-full">
                    <img src="https://picsum.photos/80/80?1" />
                  </div>
                </div>
                <span>
                  <b>New message</b>
                  <br />
                  Alice: Hi, did you get my files?
                </span>
              </a>
            </li>
            <li>
              <a className="gap-4">
                <div className="avatar">
                  <div className="w-8 rounded-full">
                    <img src="https://picsum.photos/80/80?2" />
                  </div>
                </div>
                <span>
                  <b>Reminder</b>
                  <br />
                  Your meeting is at 10am
                </span>
              </a>
            </li>
            <li>
              <a className="gap-4">
                <div className="avatar">
                  <div className="w-8 rounded-full">
                    <img src="https://picsum.photos/80/80?3" />
                  </div>
                </div>
                <span>
                  <b>New payment</b>
                  <br />
                  Received $2500 from John Doe
                </span>
              </a>
            </li>
            <li>
              <a className="gap-4">
                <div className="avatar">
                  <div className="w-8 rounded-full">
                    <img src="https://picsum.photos/80/80?4" />
                  </div>
                </div>
                <span>
                  <b>New payment</b>
                  <br />
                  Received $1900 from Alice
                </span>
              </a>
            </li>
          </ul>
        </div>
        <div className="dropdown-end dropdown z-10">
          <div tabIndex="0" className="avatar btn btn-circle btn-ghost">
            <div className="w-10 rounded-full">
              <img src="https://picsum.photos/80/80?5" />
            </div>
          </div>
          <ul
            tabIndex="0"
            className="menu dropdown-content rounded-box bg-base-100 mt-3 w-52 p-2 shadow-2xl"
          >
            <li>
              <a>Profile</a>
            </li>
            <li>
              <a>
                Inbox
                <span className="badge badge-success">12</span>
              </a>
            </li>
            <li>
              <a>Settings</a>
            </li>
            <li>
              <a>Logout</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}
